<template>
    <div class="filter">
        <div class="moduleHead">
            <span class="center">
             <router-link :to="{ name: 'browse' }">
                <span class="back"></span>
            </router-link>
            <span>Fliter</span>
            </span>
        </div>
        <div class="body">
            <div class="usernameSearch" :class="{usernameSearchActive : nameActive}">
                <input :class="{active: nameActive}" spellcheck="false" autocapitalize="off" autocorrect="off" type="text" v-bind:placeholder="language.filter_usernameSearchTip" @focus="nameSearchFocus" v-model="usernameSearch" />
                <div v-if="nameActive" class="btnCancel main_color" @click="nameSearchCancel">{{language.unify_cancel}}</div>
                <dd class="searchBtn">
                    <button v-if="nameActive" class="btn" @click='gotoSearchUserName'>{{language.unify_search}}</button>
                </dd>
            </div>
            <dl class="normalSearch" v-if="!nameActive">
                <dd>
                    <div class="l title">{{language.filter_basic}}</div>
                </dd>
                <dd>
                    <div class="l">{{language.filter_seeking}}</div>
                    <select v-model="normalSearch.match_gender" class="selectOne lineLink">
                        <option v-for="item in genderList" :value="item.value">{{item.label}}</option>
                    </select>
                </dd>
                <dd>
                    <div class="l">{{language.unify_age}}</div>
                    <div class="r">
                        <ul class="ageOptions">
                            <li>
                                <select v-model="normalSearch.match_age_min" name="from_age" class="age_group">
                                    <option v-for="item in ageList" :value="item">{{item}}</option>
                                </select>
                            </li>
                            <li>—</li>
                            <li>
                                <select v-model="normalSearch.match_age_max" name="to_age" class="age_group">
                                    <option v-for="item in ageList" :value="item">{{item}}</option>
                                </select>
                            </li>
                        </ul>
                    </div>
                </dd>
                <dd>
                    <div class="l">{{language.filter_location}}</div>
                    <router-link :to="{ name: 'location' }" class="lineLink">
                        {{match_location}}
                    </router-link>
                </dd>
                <dd>
                    <div class="l">{{language.filter_sort}}</div>
                    <select v-model="normalSearch.sort_by" name="sort_by" class="selectOne lineLink">
                        <option v-for="item in sortList" :value="item.value">{{item.label}}</option>
                    </select>
                </dd>
                <dd>
                    <div class="l title">{{language.filter_goldTit}}<span class="ico_gold"></span></div>
                </dd>
                <dd>
                    <div class="l">{{language.filter_photo}}</div>
                    <div class="r" @click="tabOnOff">
                        <OnOff :propsStatus="normalSearch.search_photo"></OnOff>
                    </div>
                </dd>
                <dd>
                    <div class="l">{{language.filter_income}}</div>
                    <select @change="checkIsGuest" class="selectOne lineLink" v-model="normalSearch.type">
                        <option v-for="item in incomeList" :value="item.value">{{item.label}}</option>
                    </select>
                </dd>
                <dd>
                    <div class="l">{{language.filter_ethnicity}}</div>
                    <div class="multipleSelectVal">{{match_ethnicityText}}</div>
                    <select @change="checkIsGuest" v-model="match_ethnicity" multiple class="selectTwo lineLink">
                        <option v-for="item in ethnicityList" :value="item.value">{{item.label}}</option>
                    </select>
                </dd>
                <dd>
                    <div class="l">{{language.filter_smoking}}</div>
                    <div class="multipleSelectVal">{{match_smokerText}}</div>
                    <select @change="checkIsGuest" v-model="match_smoker" multiple class="selectTwo lineLink">
                        <option v-for="item in smokerList" :value="item.value">{{item.label}}</option>
                    </select>
                </dd>
            </dl>
        </div>
        <div class="bottomSearchBtn" v-if="!nameActive">
            <button class="btn" @click='gotoSearchNormal'>{{language.unify_search}}</button>
        </div>
        <publicDialog :props="dialogData"></publicDialog>
    </div>
</template>
<script>
import * as API from '../api'
import OnOff from './OnOff'
import storeDataPartMixin from '../common/storeDataPartMixin'
import publicDialog from './PublicDialog'

let searchOptions = {},
    userInfo = {};

export default {

    name: 'filter',

    components: {
        OnOff,
        publicDialog
    },

    mixins: [storeDataPartMixin],

    data: function() {
        return {
            nameActive: false,
            match_location: 'Anywhere',
            usernameSearch: '',
            normalSearch: {
                match_gender: '',
                match_age_min: '18',
                match_age_max: '99',
                sort_by: 3,
                search_photo: 0,
                type: '',
                match_ethnicity: '',
                match_smoker: '',
            },
            match_ethnicityText: '',
            match_smokerText: '',
            dialogData: {},
        }
    },

    created() {
        this.browse_filterAnywhere = this.language.filter_anywhere;
        searchOptions = this.getSearchOptions();
        userInfo = this.$store.state.user.userInfo;
        //console.log(userInfo, searchOptions);
        this.initState();
    },

    activated() {
        this.nameSearchCancel();
        this.dialogData = {};
        let str = Unit.getSessionStorage("fliterLocation");
        if (str) {
            let obj = JSON.parse(str);
            this.match_location = obj.locationDes;
        }
    },

    computed: {

        match_ethnicity: {
            get: function() {
                return this.getMultipleSelectArr(this.normalSearch.match_ethnicity, this.ethnicityList);
            },
            set: function(newValue) {
                this.normalSearch.match_ethnicity = this.getMultipleSelectValue(newValue);
                this.setMatchEthnicityText(this.normalSearch.match_ethnicity);
            }
        },

        match_smoker: {
            get: function() {
                return this.getMultipleSelectArr(this.normalSearch.match_smoker, this.smokerList);
            },
            set: function(newValue) {
                this.normalSearch.match_smoker = this.getMultipleSelectValue(newValue);
                this.setMatchSmokerText(this.normalSearch.match_smoker);
            }
        },

        genderList() {
            return JSON.parse(Unit.getLocalStorage('ms_gender'));
        },

        ageList() {
            let arr = [];
            for (var i = 18; i < 100; i++) {
                arr.push(i);
            }
            return arr;
        },

        sortList() {
            return [{
                value: "3",
                label: this.language.filter_last
            }, {
                value: "2",
                label: this.language.filter_newest
            }, {
                value: "1",
                label: this.language.filter_distance
            }];
        },

        incomeList() {
            let arr = JSON.parse(Unit.getLocalStorage('ms_type'));
            arr.unshift({
                value: "",
                label: this.language.unify_noPreference
            });
            return arr;
        },

        ethnicityList() {
            let arr = JSON.parse(Unit.getLocalStorage('ms_ethnicity'));
            return arr;
        },

        smokerList() {
            let arr = JSON.parse(Unit.getLocalStorage('ms_smoker'));
            return arr;
        }

    },

    methods: {

        tabOnOff: function(e) {
            if (this.checkIsGuest()) {
                return false;
            }
            if (this.normalSearch.search_photo) {
                this.normalSearch.search_photo = 0;
            } else {
                this.normalSearch.search_photo = 1;
            }

        },

        initState: function() {
            this.normalSearch.match_gender = parseInt(searchOptions.match_gender || userInfo.match.match_gender);
            this.setMatchSmokerText(searchOptions.match_smoker);
            this.setMatchEthnicityText(searchOptions.match_ethnicity);
        },

        setMatchEthnicityText(val) {
            this.match_ethnicityText = this.getLocalStorageMultipleSelectLable('ms_ethnicity', val, ';', 30, this.language.unify_noPreference);
        },

        setMatchSmokerText(val) {
            this.match_smokerText = this.getLocalStorageMultipleSelectLable('ms_smoker', val, ';', 30, this.language.unify_noPreference);
        },

        getSearchOptions() {
            let data = Unit.getSessionStorage('ms_search_options');
            if (data) {
                data = JSON.parse(data);
            }
            return data;
        },

        nameSearchFocus: function() {
            this.nameActive = true;
        },

        nameSearchCancel: function() {
            this.nameActive = false;
            this.usernameSearch = '';
        },

        gotoSearchUserName: function() {
            if (_.trim(this.usernameSearch.length) > 0) {
                searchOptions = {};
                searchOptions.username = this.usernameSearch;
                searchOptions.page_num = 0
                searchOptions.offset = 30;
                searchOptions.search_type = 2;
                searchOptions.reload = true;
                this.usernameSearch = '';
                this.gotoSearch();
            }
        },

        gotoSearchNormal: function() {
            searchOptions = {};
            searchOptions = this.normalSearch;
            searchOptions.page_num = 0
            searchOptions.offset = 30;
            searchOptions.search_type = 1;
            searchOptions.reload = true;
            let locationOpt = this.getLocationOption();
            searchOptions = _.assign(searchOptions, locationOpt);
            searchOptions = this.filterOpt(searchOptions);
            this.gotoSearch();
        },

        filterOpt: function(opts) {
            console.log(opts);
            let obj = {};
            for (let i in opts) {
                if (opts[i] !== '') {
                    obj[i] = opts[i];
                }
            }
            console.log(obj);
            return obj;
        },

        getLocationOption: function() {
            let locationOpt = {},
                str = Unit.getSessionStorage("fliterLocation");

            if (str) {
                let obj = JSON.parse(str);
                locationOpt = obj.locationData[obj.locationType];
            }
            return locationOpt;
        },

        gotoSearch: function() {
            Unit.setSessionStorage('ms_search_options', JSON.stringify(searchOptions));
            this.$router.push({
                'name': 'browse'
            });
        },

        checkIsGuest: function(e) {
            let tthis = this;
            if (parseInt(userInfo.status.isGuest) == 1) {
                tthis.normalSearch.type = '';
                tthis.normalSearch.search_photo = 0;
                tthis.normalSearch.match_ethnicity = '';
                tthis.normalSearch.match_smoker = '';
                tthis.match_ethnicityText = tthis.language.unify_noPreference;
                tthis.match_smokerText = tthis.language.unify_noPreference;
                if (e) {
                    e.target.blur();
                };
                tthis.dialogData = {
                    position: 'middle',
                    type: 'upgrade',
                    content: {
                        info: tthis.language.filter_upgradeTip,
                    }
                };
                return true;
            } else {
                return false;
            }

        }

    }

}

</script>
<style scoped>
.filter {
    padding-top: 44px;
    padding-bottom: 65px;
    background: #f1f1f1;
}

.filter .body {
    padding-bottom: 10px;
}

.filter .ico_gold {
    padding: 2px 0 2px 20px;
    background: url(../assets/ico_gold.png) center no-repeat;
    background-size: auto 20px;
    margin-left: 5px;
}

.filter .normalSearch {
    background-color: #fff;
    box-sizing: border-box;
    padding: 0 20px 0px 20px;
    font-size: 13px;
}

.filter .normalSearch dd {
    position: relative;
    border-bottom: 1px solid #ececec;
    padding: 10px 0;
    min-height: 30px;
}

.filter .normalSearch dd:last-of-type {
    border-bottom: 0;
}

.filter .normalSearch .l {
    position: absolute;
    top: 10px;
    left: 0;
    line-height: 30px;
    min-height: 30px;
    color: #999;
    font-size: 14px;
}

.filter .normalSearch .r {
    position: absolute;
    top: 10px;
    right: 0;
    line-height: 30px;
    min-height: 30px;
    color: #222;
}

.filter .normalSearch .gender {
    border: 1px solid #e8b14f;
    border-right: 0;
    height: 28px;
    line-height: 28px;
}

.filter .normalSearch .gender li {
    float: left;
    height: 28px;
    line-height: 28px;
    text-align: center;
    min-width: 50px;
    padding: 0 5px;
    border-right: 1px solid #e8b14f;
    color: #e8b14f;
}

.filter .normalSearch .gender li.active {
    color: #fff;
    background-color: #e8b14f;
}

.filter .normalSearch .title {
    line-height: 30px;
    font-size: 14px;
    color: #666;
}

.filter .normalSearch .ageOptions {
    display: table;
}

.filter .normalSearch .selectOne,
.filter .normalSearch .selectTwo {
    font-size: 12px;
    direction: rtl;
    background-color: #fff;
    max-height: 30px;
}
.filter .normalSearch .selectOne option,
.filter .normalSearch .selectTwo option{
    direction: ltr;
}
.filter .normalSearch .lineLink{
    position: relative;
    width: 100%;
    height: 30px;
    line-height: 30px;
    z-index: 1;
    background:none;
    display: inline-block;
    text-align: right;
}

.filter .normalSearch .selectTwo {
    position: relative;
    opacity: 0;
    z-index: 1;
}

.filter .normalSearch .multipleSelectVal {
    position: absolute;
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    color: #222;
    line-height: 30px;
    text-align: right;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

.filter .normalSearch .ageOptions li {
    display: table-cell;
    vertical-align: middle;
    padding: 0 0 0 10px;
    color: #999;
}

.filter .normalSearch .ageOptions select {
    border-radius: 3px;
    height: 28px;
    padding: 0 15px;
    background: #fff;
    border: 1px solid #ececec;
    text-align: center;
}

.filter .usernameSearch {
    height: 50px;
    box-sizing: border-box;
    padding: 10px;
    position: relative;
    background: #e4e4e4;
}

.filter .normalSearch a {
    color: #222;
}

.filter .usernameSearch input[type=text] {
    width: 100%;
    border: 0;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #fff;
    border-radius: 3px;
    font-size: 14px;
    float: left;
}

.filter .usernameSearch input[type=text].active {
    text-align: left;
    text-indent: 33px;
    width: calc(100% - 70px)
}

.filter .usernameSearch:before {
    content: '';
    position: absolute;
    width: 30px;
    height: 16px;
    left: 48%;
    top: 50%;
    margin: -9px 0 0 -90px;
    background: url(../assets/ico_search.png) center no-repeat;
    background-size: 16px auto;
}

.filter .usernameSearchActive:before {
    left: 10px;
    margin: -9px 0 0 0;
}

.filter .usernameSearch .btnCancel {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 80px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}

.filter .usernameSearch .btn {
    margin-top: 20px;
}

.filter .usernameSearch dd.searchBtn {
    margin: auto;
    text-align: center;
    width: 100%;
    clear: both;
    margin-top: 10px;
    display: block;
}

.filter .bottomSearchBtn {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background-color: #fff;
    text-align: center;
    width: calc(100% - 40px);
    height: 40px;
    padding: 12px 20px;
    border-top: 1px solid #e2e4e7;
}

</style>
